<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>活动详情</title>
  <link rel="stylesheet" href="./static/css/common.css">
  <style>
    body{
      background: #fff;
    }
    h1{
      margin:10px 15px 5px 15px;
      font-size: 16px;
      font-weight: 600;

    }
    .marg05{
      margin:5px 0;
    }
    .noActaive{
      margin-top:40%;
      font-size: 24px;
      color:#ccc;
      text-align: center
    }
    .numBox{
      font-size: 12px;
      padding:0 15px;

    }
    .activeCover{
      height:375px;
      overflow: hidden;
    }
    .activeCover img{
      display: block;
      width:100%;
      min-height:100%;

    }
    .user .headbox img{
      width: 100%;
      height: 100%;
      display: inline-block;
    }
    .fixBox{
      position: fixed;
      bottom: 0;
      background: #5BA8F7;
      width: 100%;
      height: 48px;
      text-align: center;
      color: #fff;
      text-decoration: none;
      font-size: 20px;
      line-height: 48px;
    }
    .iconImg{
      vertical-align: sub;
      margin-right: 4px;
      display: inline-block;
      width: 14px;
    }
  </style>
</head>
<body>
  <div id="app" v-cloak>
    <div v-if="hasData">
      <div class="activeCover">
        <img :src="logo_url" alt="">
      </div>
      <div>
        <h1 class="titleBox">{{title}}</h1>
        <div class="gray numBox">
          <span>浏览 {{page_view}}</span>
          <span>收藏 {{player_count}}</span>
        </div>
        <div class="user">
          <div class="headbox"><img class="userHead" :src="hospital_logo" alt=""></div>
          <div class="userInfo">
            <div class="userName">{{hospital_name}}</div>
            <!-- <div class="time">{{time(user.getTime)}}</div> -->
          </div>
          <!-- <a :href="appUrl" id="appBtn" type="button" >关注</a> -->
        </div>
        <div class="padLeft gray" style="padding-bottom:10px;border-bottom:10px solid #F8F8F8">
          <div class="marg05">
            <img class="iconImg" src="./static/image/time.png" alt="">
            <span >{{time(begin_time)}} - {{time(end_time)}}</span>
          </div>
          <div class="marg05">
            <img class="iconImg" src="./static/image/local.png" alt="">
            <span >{{positaion}}</span>
          </div>
        </div>
        <div class="padLeft">
          <p>活动内容：</p>
          <div v-html="content">
  
          </div>
        </div>
        <div >
            <a v-if="isActiv" class="fixBox" :href="appUrl">我要参加</a>
            <a v-else class="fixBox" style="background:#ccc" :href="appUrl">已结束</a>
        </div>
      </div>
    </div>
    <div v-else>
      <div class="noActaive">未获取到对应的活动....</div>
    </div>
  </div>  



  <script src="./static/js/vue.js"></script>
  <script src="./static/js/axios.js"></script>
  <script>
    new Vue({
      el:'#app',
      data:{
        isActiv:true,
        hasData:1,
        logo_url:'',
        title:'',
        player_count:'',
        page_view:'',
        hospital_name:'',
        hospital_logo:'',
        begin_time:'',
        end_time:'',
        positaion:'',
        content:''
      },
      created() {  
        this.renders()
      },
      methods:{
        renders(){
          let url = location.href.split('?');
          let id = '';
          document.title = '活动详情';
          Object.keys(url).forEach(function(key){
          if(url[key].indexOf('id=') > -1){
            id = url[key].split('=')
            id = parseInt(id[1])
          }
        });
          axios.get(`https://www.yajiapp.com:8443/super_yaji/hospitalActivity/wap/${id}`)
          .then(res =>{
            if(res.data.data){
              this.hasData = true;
              this.logo_url = res.data.data.logo_url;
              this.title = res.data.data.name;
              this.page_view = res.data.data.page_view;
              this.player_count = res.data.data.player_count;
              this.hospital_name = res.data.data.hospital_name;

              this.content = res.data.data.content.replace(/<img src=/g,'<img style="width:100%" src=');
              this.hospital_logo = res.data.data.hospital_logo;
              this.begin_time = res.data.data.begin_time;
              this.end_time = res.data.data.end_time;
              this.positaion = res.data.data.positaion
              const newTime = Math.round(new Date());
         
              if(newTime > this.end_time){
                this.isActiv = false
              } else {
                this.isActiv = true
              }
            }else {
              this.hasData = true
            }
           
          })
         
          const  ua = navigator.userAgent.toLowerCase();	
          if (/iphone|ipad|ipod/.test(ua)) {
            this.appUrl = 'https://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=1130246825';
          } else if (/android/.test(ua)) {
          this.appUrl = 'https://a.app.qq.com/o/simple.jsp?pkgname=com.grzx.toothdiary&from=groupmessage'
          }
        },
        time(val) {
          const now =  new Date(val)
          const year = now.getFullYear();
          const month = now.getMonth()+1;
          const date = now.getDate();
          
          return `${year}.${month}.${date}`
        },
        goVideo(id) {
          console.log(id)
          window.location = 'index.html#/Mvideo?id='+id;
          this.renders()
        }
      }
    })
  </script>
</body>
</html>
